<template>
  <div>
    <Grid :column-num="columnNum">
      <GridItem
        v-for="(item, index) in GridData"
        :key="index"
        :icon="item.img"
        :text="item.title"
        @click="onClick(index)"
      />
    </Grid>
  </div>
</template>

<script>
import { Grid, GridItem } from "vant";

export default {
  components: {
    Grid,
    GridItem,
  },
  props: {
    columnNum: {
      //列数
      type: String,
      default: "4",
    },
    GridData: {
      //总数据
      type: Array,
      required: true,
    },
  },

  methods: {
    onClick(index) {
      //点击跳转
      var path = "";
        switch (index){
            case 0:
                path = this.$route.meta.routePath[0];
                break;
            case 1:
                path = this.$route.meta.routePath[1];
                break;
            case 2:
                path = this.$route.meta.routePath[2];
                break;
            case 3:
                path = this.$route.meta.routePath[3];
                break;
        }
      this.$router.pushRouteByQuery(path);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>